<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>入库统计</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="border-radius: 0;border-top: 4px solid #d2d2d2;">
            <div class="layui-inline">
                <label class="layui-form-label">药品分类</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择</option>
                        <option value="AAA">药品 A</option>
                        <option value="BBB">药品 B</option>
                        <option value="CCC" selected>药品 C</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">药品名称</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择</option>
                        <option value="AAA">药品 A</option>
                        <option value="BBB">药品 B</option>
                        <option value="CCC" selected>药品C</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">入库日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="2022-11-20" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-sysuser-front-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body" style="display: flex; justify-content: center;">

        <div style="padding-bottom: 10px;">
            <!--                <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">查询</button>-->
<!--            <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">查询</button>-->
        </div>

        <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>

        <script type="text/html" id="table-useradmin-webuser">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>

        <!--状态判断-->
        <script type="text/html" id="statusTpl">
            {{#  if(d.status == 1){ }}
            <button class="layui-btn layui-btn-xs">正常</button>
            {{#  } else if(d.status == 2) { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">冻结</button>
            {{#  } }}

        </script>

        <!--  创建时间格式化处理 -->
        <script type="text/html" id="createTimeTpl">
            {{formatDate(d.createTime)}}
        </script>

        <!--  更新时间格式化处理 -->
        <script type="text/html" id="updateTimeTpl">
            {{formatDate(d.updateTime)}}
        </script>

    </div>
</div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table" id="rukuTable" lay-filter="rukuTable"></table>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12" id="rukuTablePage"></div>
    </div>
</div>
<script>
    layui.use(['table', 'layer', 'jquery', 'laypage'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        var tableHead = '<thead>' +
            '<tr>' +
            '<th>Id</th>' +
            '<th>药品名称</th>' +
            '<th>药品ID</th>' +
            '<th>库存数量</th>' +
            '<th>库存警报</th>' +
            '</tr>' +
            '</thead>';

        // 渲染表格和分页
        table.render({
            elem: '#rukuTable',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'Id', width: 150 },
                { field: 'productName', title: '药品名称', width: 150 },
                { field: 'productId', title: '药品ID', width: 150 },
                { field: 'quantity', title: '库存数量', width: 200 },
                { field: 'stockAlert', title: '库存警报', width: 150 },
            ]],
            url: '/inventory/list', // 请求后台接口获取数据
            done: function (res) {
                console.log(res)
                if (res.length > 0) {
                    var rukuData = res;
                    var html = '';
                    for (var i = 0; i < rukuData.length; i++) {
                        var sales = rukuData[i];
                        html += '<tr>';
                        html += '<td style="width: 150px;">' + sales.id + '</td>';
                        html += '<td style="width: 150px;">' + sales.productName + '</td>';
                        html += '<td style="width: 150px;">' + sales.productId + '</td>';
                        html += '<td style="width: 200px;">' + sales.quantity + '</td>';
                        html += '<td style="width: 150px;">' + sales.stockAlert + '</td>';
                        html += '</tr>';
                    }
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
                $("#rukuTable").html(tableHead + html);
            }
        });
    });
</script>
</body>
</html>